<template>
  <div class="page" style="padding-bottom: 100px;">
    <div class="weui-flex v-mdl pd bd-b">
      <div class="weui-flex__item fw">{{document.name}}</div>
      <div>
        <notify-btn cls="ui btn link" @hit="onGoDetail(document)">查看详情</notify-btn>
      </div>
    </div>
    <div class="ta-c pdt fs-xl fw">
      <span v-if="task.group && task.group.name">{{task.group.name}}</span>
      <span v-if="task.group && !task.group.name && task.group.openGroupId">
        <open-data type="groupName" :open-gid="task.group.openGroupId"></open-data>
      </span>
    </div>
    <nav-bar :unSubmitNum="unsubmitedList.length" :submitedNum="submitedList.length" @change="onNavChange"></nav-bar>
    <div v-if="currentNav == 0" class="weui-cells weui-cells_after-title mgb-s v-mdl item-progress">
      <div v-if="n.state != 'start' && n.user"  v-for="(n, i) in submitedList" :key="i"
        class="weui-cell weui-cell_access v-mdl" style="padding: 8px 16px;">
        <div class="weui-cell__hd" @tap="goProgress(n.id)">
          <div style="width: 40px;">
            <avatar v-if="n.user" :src="n.user.avatarUrl"></avatar>
          </div>
        </div>
        <div class="weui-cell__bd pdl" @tap="goProgress(n.id)">
          {{n.memberName}}
          <div v-if="n.unreadCount > 0" class="dolt"></div>
        </div>
        <div class="weui-cell__ft avatars" style="width: 100px;">
          <span class="fs-4 mgl fr">{{n.likeCount}}</span>
          <div class="fr" v-if="n.liked" @tap="unstar(n.id)">
            <i class="if icon-favoed c-red"></i>
          </div>
          <div class="fr" v-if="!n.liked" @tap="star(n.id)">
            <i class="if icon-favo"></i>
          </div>
        </div>
      </div>
    </div>
    <div v-if="currentNav == 1 && unsubmitedList.length > 0" class="weui-cells weui-cells_after-title v-mdl item-progress">
      <div v-if="n.state == 'start' && n.user"
        v-for="(n, i) in unsubmitedList" :key="i"
        class="weui-cell weui-cell_access v-mdl"
      >
        <div class="weui-cell__hd">
          <div style="width: 40px;">
            <avatar v-if="n.user && n.user.avatarUrl" :src="n.user.avatarUrl"></avatar>
          </div>
        </div>
        <div class="weui-cell__bd pdl">
          {{n.memberName}}
          <div v-if="n.unreadCount > 0" class="weui-badge mgl" style="margin-left: 5px;">{{n.unreadCount}}</div>
        </div>
      </div>
    </div>
    <div class="fix-bottom bg-white weui-flex v-mdl">
      <div class="weui-flex__item">
        <notify-btn v-if="submitedNum" cls="ui btn secondary no-rounder no-border" @hit="onBatchReply">
          批量回复
        </notify-btn>
        <notify-btn v-else cls="ui btn secondary no-rounder no-border c-gray">
          批量回复
        </notify-btn>
      </div>
      <div class="weui-flex__item">
        <button open-type="share" class="ui btn primary no-rounder no-border">通知到微信</button>
      </div>
    </div>
    <page-common></page-common>
    <page-mask v-if="isPageLoading"></page-mask>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import PageMask from './page-mask.vue'
import { mapGetters, mapActions } from 'vuex'
import DocumentPanel from '@/components/document-panel'
import NavBar from './nav-bar'
import base from '@/mixins/base'
import * as $group from '@/api/group'
import {getById} from '@/graphql/task'
import {getMembers} from '@/graphql/group'
import NotifyBtn from '@/components/notify-btn'
import * as $progress from '@/api/progress'
import * as $task from '@/api/task'
import {keyBy} from '@/utils/helper'

export default {
  mixins: [base],
  data () {
    return {
      currentNav: 0,
      members: [],
      taskId: 0
    }
  },
  components: {
    PageCommon,
    Avatar,
    DocumentPanel,
    NavBar,
    NotifyBtn,
    PageMask
  },
  async onPullDownRefresh() {
    await this.fetchById({taskId: this.task.id, cache: false})
    wx.stopPullDownRefresh()
  },
  computed: {
    ...mapGetters('task', [
      'task',
      'urgeRs',
    ]),
    ...mapGetters('document', [
      'document',
    ]),
    ...mapGetters('progress', [
      'pageTaskId',
      'progresses'
    ]),
    ...mapGetters([
      'loginer',
      'isShowModel',
    ]),
    isTaskOnwer () {
      if (!this.task.creator) return false
      if (!this.loginer.id) return false
      if (parseInt(this.task.creator.id) !== parseInt(this.loginer.id)) return false
      return true
    },
    unSubmitNum () {
      let t = 0
      this.progresses.forEach(n => {
        if (n.state === 'start') t++
      })
      return t
    },
    submitedNum () {
      let t = 0
      this.progresses.forEach(n => {
        if (n.state !== 'start') t++
      })
      return t
    },
    submitedList () {
      let progresses = this.dataProgresses.filter(n => n.state !== 'start')
      return progresses
    },
    unsubmitedList () {
      let progresses = this.dataProgresses.filter(n => n.state === 'start')
      return progresses
    },
    dataProgresses () {
      let t = []
      let kvMembers = keyBy(this.members, 'userId')
      this.progresses.forEach(n => {
        let memberName = n.user && n.user.id && kvMembers[n.user.id] ? kvMembers[n.user.id].name : ''
        if (!memberName) {
          memberName = n.user && n.user.nickName ? n.user.nickName : ''
        }
        n.memberName = memberName
        t.push(n)
      })
      return t
    }
  },
  onShareAppMessage() {
    return {
      title: this.task.document.name,
      path: '/pages/task-invite/main?taskId=' + this.taskId,
      imageUrl: ''
    }
  },
  methods: {
    onPageShow () {
      this.isPageShow = true
      this.isPageLoading = true
    },
    onPageHide () {
      this.isPageShow = false
      this.isPageLoading = false
    },
    async loginBack () {
      try {
        this.isPageLoading = true
        let {taskId} = this.getParams()
        if (!taskId) {
          this.$store.commit('UI_SET_TOAST_WARNING_MSG', '缺少参数！')
          this.isPageLoading = false
          return
        }
        this.taskId = taskId
        this.setPageTaskId(taskId)
        await this.fetchById({taskId})
        this.$store.commit('document/SET_DOCUMENT', this.task.document)
        this.members = await this.getMembersById(this.task.groupId)
        wx.setNavigationBarTitle({
          title: this.task.document.name
        })
        this.isPageLoading = false
      } catch (e) {
        this.isPageLoading = false
        this.$debug({err: e})
      }
    },
    onNavChange (currentNav) {
      this.currentNav = currentNav
    },
    onBatchReply () {
      this.$store.commit('member/MEMBER_SET_CHECK_ALL', false)
      wx.navigateTo({
        url: '/pages/batch-reply-check/main?taskId=' + this.pageTaskId
      })
    },
    ...mapActions('task', [
      'urge',
    ]),
    ...mapActions('group', [
      'getMembersById',
    ]),
    ...mapActions('progress', [
      'setPageTaskId',
    ]),
    ...mapActions([
      'setIsShowModel',
      'setIsPageLoading',
    ]),
    onGoDetail (document) {
      this.$store.commit('document/SET_DOCUMENT', document)
      wx.navigateTo({
        url: '/pages/document-detail/main'
      })
    },
    async fetchById ({taskId, cache = true}) {
      let rs = await $task.getById(taskId)
      this.$store.commit('task/TASK_SET_TASK', rs)
      this.$store.commit('progress/PROGRESS_RESET_PROGRESSES', rs.progresses)
      return rs
    },
    goProgress (progressId) {
      wx.navigateTo({
        url: '/pages/progress/main?progressId=' + progressId
      })
    },
    star (progressId) {
      let {taskId} = this.getParams()
      $progress.createRating(progressId)
      let task = this.task
      let progresses = []
      task.progresses.forEach(n => {
        if (n.id === progressId) {
          n.liked = true
          n.likeCount = n.likeCount + 1
        }
        progresses.push(n)
      })
      task.progresses = progresses
      this.$store.commit('task/TASK_SET_TASK', task)
    },
    unstar (progressId) {
      let {taskId} = this.getParams()
      $progress.removeRating(progressId)
      let task = this.task
      let progresses = []
      task.progresses.forEach(n => {
        if (n.id === progressId) {
          n.liked = false
          n.likeCount = (n.likeCount - 1) <= 0 ? 0 : n.likeCount - 1
        }
        progresses.push(n)
      })
      task.progresses = progresses
      this.$store.commit('task/TASK_SET_TASK', task)
    }
  }
}
</script>

<style scoped lang="less">
.item-progress{
  &.state-start {
    background-color: #EEE;
  }
}
</style>
